<template>
	<view class="">
		<common-title :title="titleContent" @clickLeft="backToUpPage"></common-title>
		<view class="couple-bind-search">
			<view class="couple-bind-search-fere">
				<view class="couple-bind-search-fere-box">
					<uni-icons type="search" size="16" style="padding: 0 20rpx;"/>
					<input v-model="searchAccount" placeholder="账号" type="text" @input="inputAccount" maxlength="15"/>
					<uni-icons type="close" size="16" style="padding: 0 20rpx;" v-if="showClearIcon" @click="clearIcon"/>
				</view>
				<button class="search-button" :disabled="searchAccount.length === 0" @click="searchOperation">搜索</button>
			</view>
			
			<view class="couple-bind-myAccount">我的账号:{{myAccount}}</view>
		</view>
		<!-- 搜索结果 -->
		<view class="search-result" v-if="searchUser.account">
			<!-- 头像,用户名和账号  -->
			<view class="search-result-left">
				<!-- 头像 -->
				<view class="search-result-avatar">
					<image :src="searchUser.avatar"></image>
				</view>
				<!-- 用户名和账号 -->
				<view class="search-result-userName-account">
					<view class="search-result-userName">{{searchUser.userName}}</view>
					<view class="search-result-account">账号:{{searchUser.account}}</view>
				</view>
			</view>
			
			<!-- 添加按钮 -->
			<view class="search-result-right">
				<button class="search-result-button" @click="bindFere" :class="{active : searchUser.sex === 0}" v-if="searchUser.hasFere === '0'">绑定</button>
				<view style="margin: 40px;width: 100px;" v-else>改账号已被其他用户绑定</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, onMounted } from "vue";
	import { getDataFromStorage } from "../../../../utils/commonUtils";
	import { getUserInfoByAccount } from "../../../../utils/apiMine";
	import { sendMessage } from "../../../../utils/websocket";
	
	
	//===============================用户是否登录了=====================
	//================================common-title=========================================
	//标题内容
	const titleContent = ref({
		left:'',
		midst:'情侣绑定'
	});
	
	//返回
	const backToUpPage = () => {
		uni.switchTab({
			url:'/pages/mine/mine'
		})
	};
	//-----------------根据账号搜素绑定情侣---------------------------------
	const searchAccount = ref('');
	const inputAccount = () => {
		
	};
	//控制清除图标
	// 使用计算属性来控制清除图标的显示
	const showClearIcon = computed(() => searchAccount.value.length > 0);
	//清空输入内容
	const clearIcon = () => {
		searchAccount.value = '';

	};
	const searchUser = ref({
		avatar: null,
		userName: null,
		account:null,
		sex: null
	});
	const searchOperation = async () => {
		searchUser.value.account = null;
		if (searchAccount.value === myAccount.value) {
			uni.showToast({
				title:'不能绑定自己',
				icon:"error"
			});
			return;
		}
		uni.showLoading({
			mask:true
		});
		let res = await getUserInfoByAccount(searchAccount.value);
		uni.hideLoading();
		if (res.status === '1007') {
			uni.showToast({
				title:res.message,
				icon:"error"
			});
			return;
		}
		// console.log(res);
		searchUser.value = res;
		// console.log(searchUser.value);
	}
	//-----------------我的账号--------------------------------
	const myAccount = ref('')
	onMounted( async () => {
		myAccount.value = await getDataFromStorage('userAccount');
	})
	//-----------------发送好友绑定请求--------------------------------
	const bindFere = async () => {
		// console.log("发送请求");
		let data = {
			type:"5000",
			from:myAccount.value,
			to:searchAccount.value,
			message:"发送好友请求"
		};
		await sendMessage(data);
	}
	
</script>

<style lang="scss" scoped>
	.couple-bind-search{
		display: flex;
		flex-direction: column; /* 垂直排列 */
		justify-content: center; /* 垂直居中 */
		align-items: center; /* 水平居中 */
		height: 220rpx;
		padding-bottom: 20rpx;
		background-color: #f8f8f8;
		color: #676767;
		.couple-bind-search-fere{
			display: flex;
			.couple-bind-search-fere-box{
				display: flex;
				align-items: center;
				width: 500rpx;
				height: 80rpx;
				border-radius: 30rpx;
				background-color: #fff;
				// color: #676767;
			}
			.search-button{
				margin-left: 30rpx;
				background-color: #95ec69;
			}
			
		}
		.couple-bind-myAccount{
			margin-top: 40rpx; /* 提供一些间距 */
			text-align: center; /* 使文本居中 */
		}
	}
	.search-result{
		display: flex;
		align-items: center;
		justify-content: space-between; /* 使两个子元素分开，右侧元素将被推到右边 */
		width: 750rpx;
		height: 70px;
		background-color: #f8f8f8;
		margin-top: 20px;
		.search-result-left{
			display: flex;
			// background-color: #95ec69;
			margin-left: 20px;
			.search-result-avatar{
				width: 50px;
				height: 50px;
				image{
					width: 100%;
					height: 100%;
					border-radius: 10px;
				}
			}
			.search-result-userName-account{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding-left: 20px;
				.search-result-userName{
					font-size: 18px;
				}
				.search-result-account{
					font-size: 14px;
				}
			}
		}
		.search-result-right{
			display: flex;
			.search-result-button{
				width: 70px;
				height: 40px;
				background-color: #87CEEB;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 40px;
				&.active {
					background-color: #FF99CC;
				}
			}
		}
	}
</style>